<template>
  <el-dialog
    :width="'calc('+modelWidth+' - 96px)'"
    :destroy-on-close="true"
    :visible="visible"
    @close="$emit('close')"
  >
    <span slot="title">进度</span>
    <div style="text-align: center">
      <p>
        共&nbsp;<strong>{{ countAll }}</strong>&nbsp;道题目
      </p>
      <p v-if="!finished">
        已经完成&nbsp;<strong>{{ countDone }}</strong>&nbsp;道
      </p>
      <p v-if="finished">已经全部完成了</p>
      <p>
        用时&nbsp;<strong>{{ timeStr }}</strong>
      </p>
      <p>
        正确率&nbsp;<span :style="{color:rate >= 0.95?'#67C23A':rate >= 0.9?'#E6A23C':'#F56C6C'}">
          <strong>{{ rate * 100 }}%</strong></span>
      </p>
      <p>
        <el-button
          v-if="finished"
          @click="$emit('close')"
          type="success"
          plain
          round
          size="medium"
        >
          知道了
        </el-button>
        <el-button
          v-if="finished"
          @click="$emit('return')"
          type="danger"
          plain
          round
          size="medium"
        >
          退出
        </el-button>
        <el-button
          v-if="!finished"
          @click="$emit('cancel')"
          type="primary"
          plain
          round
          size="medium"
        >
          好的
        </el-button>
      </p>
      <p
        v-if="finished"
        class="btn-indra-grey"
      >
        *点击正确率按钮可显示此窗口
      </p>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: "jumper",
    props: ["content","answersInit","rate","finished","timeStr","visible"],
    components: {},
    data() {
      return {};
    },
    computed: {
      modelWidth() {
        return this.$store.state.style.modelWidth;
      },
      countAll() {
        return this.answersInit.length;
      },
      countDone() {
        let count = 0;
        for (let i = 0; i < this.answersInit.length; i++) {
          if (this.answersInit[i] != "") {
            count++;
          }
        }
        return count;
      },
    },
    methods: {
      handleClose() {
        if (this.finished) {
          this.$emit("close");
        } else {
          this.$emit("cancel");
        }
      },
    },
  };
</script>